昨天我們已經建好了基本的架構，接下來我們來做顯示的彈出式畫面吧！

Popup 頁面

Popup 頁面也就是當我們點擊工具列上的 Extension 圖示時，會跳出的小視窗。
這個頁面主要是用台提供使用這互動的畫面，就我們的主題來說就會提供，範本文字的顯示與修改。

建立畫面

因為我們的畫面不複雜所以我們可以直接調整 src\App.vue 已達到我們的畫面顯示。

第一步、構想

我們需要一個可以顯示目前範本，也可以修改內容的畫面，如下圖

其中 {REVIEWER_NAME}、{MR_LINK} 是因為這會是動態文字，會因為每次的 Merge Request 不同而更新。

當然，範本文字之後隨時都可以調整，所以不用現在就決定要怎麼表達，畢竟這是另外一個學問🤔

第二步、刻畫面

因為我們有加入 Tailwind 所以可以很快速地透過 Tailwind 提供的 class 快速地完成我們需要的畫面

<template>
  <div class="w-[300px] p-2">
    <div class="font-bold">範本文字</div>
    <textarea class="w-full h-20 border-1 border-gray-600 rounded p-2" rows="5">Hello {REVIEWER_NAME}，這是最新的 {MR_LINK}，再麻煩你，謝謝</textarea>
  </div>
</template>

接著打開 terminal 並輸入以下指令：

npm run dev

打開 Local 連結，我們應該就可以得到以下的畫面

這邊先有畫面就好，互動的部分我們之後再新增！

到這邊我們可能會有個疑問：
阿這就是只是用 Vue 做網站，跟 Extension 有什麼關係？

明天我們就來讓它成功轉換成 Extension！